import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';

import logo from '../../../assets/new_home/logo.png'

// 历史记录面板组件，使用 forwardRef 暴露内部方法给父组件
const HistoryPanel = forwardRef(({ onItemSelected, disableClick, newHistoryItem, selectedItem: propSelectedItem, originPageType }, ref) => {
  const [selectedItem, setSelectedItem] = useState(null); // 内部状态：当前选中的历史记录项
  const [showAll, setShowAll] = useState(false); // 是否显示所有历史记录 (查看更多/收起)
  const [historyItems, setHistoryItems] = useState([]); // 历史记录列表数据
  const [loading, setLoading] = useState(false); // 加载状态

  // 监听 propSelectedItem 的变化，更新内部选中状态
  useEffect(() => {
    console.log('AssistantLeft: propSelectedItem changed:', propSelectedItem);
    // 如果 propSelectedItem 为 null，清除内部选中状态
    if (propSelectedItem === null) {
        setSelectedItem(null);
    } else if (propSelectedItem && propSelectedItem.id !== selectedItem?.id) {
        // 如果 propSelectedItem 是一个不同的项，更新内部选中状态
        setSelectedItem(propSelectedItem);
    }
    // 注意: 这里不调用 onItemSelected 以避免无限循环
    // onItemSelected 应该在用户点击时或 fetchHistory 中自动选择时调用
  }, [propSelectedItem]);

  // 异步函数：获取历史记录数据
  const fetchHistory = async () => {
    let userId = 27; // 用户ID，目前硬编码为20
    setLoading(true); // 设置加载状态为 true
    try {
      // 调用接口获取对话历史记录
      const res = await fetch(`https://55au18tn8357.vicp.fun/prod-api/system/message/list?pageNum=1&pageSize=100000&userId=${userId}`);
      const data = await res.json();
      console.log(" data.rows", data.rows)
      if (data.code === 200 && data.rows.length > 0) { // 如果成功获取到数据且有记录
        // 过滤出 isFather 为 true 的记录 (主对话)，并格式化数据
        const items = data.rows?.filter(item => item.isFather == "true").map(item => ({
          id: item.id,
          title: item.question,
          answer: item.content,
          sessionId: item.sessionId,
          token: item.token
        }));
        console.log(" data.rows", items)
        setHistoryItems(items); // 更新历史记录列表

        // 自动选择第一个历史记录项的逻辑
        // 仅当 originPageType 为 true (从AI广场跳转过来)，且父组件没有指定选中项，
        // 并且内部状态没有选中临时项 (-1) 时触发
        if (originPageType === true && !propSelectedItem && (!selectedItem || selectedItem.id === '-1')) {
           // 设置内部选中状态
          setSelectedItem(items[0]);
          // 调用父组件回调函数，加载消息列表
          if(onItemSelected) {
            onItemSelected(items[0]);
          }
        } 

      } else { // 如果没有历史记录
        setHistoryItems([]); // 清空历史记录列表
        setSelectedItem(null); // 清空选中项
         // 如果没有历史记录且 originPageType 为 true，可能仍需要清除父组件的选中状态
         // 这部分逻辑目前由 AssistantContainer 的初始化处理
      }
    } catch (err) { // 错误处理
      setHistoryItems([]); // 发生错误时清空列表
      setSelectedItem(null); // 清空选中项
    }
    setLoading(false); // 设置加载状态为 false
  };

  // 使用 useImperativeHandle 暴露 fetchHistory 方法给父组件通过 ref 调用
  useImperativeHandle(ref, () => ({
    fetchHistory
  }));

  // 组件挂载时获取历史记录
  useEffect(() => {
    fetchHistory()
  }, []);

  // 监听 newHistoryItem 的变化，更新历史记录列表 (用于添加新对话记录)
  useEffect(() => {
    if (newHistoryItem) {
      setHistoryItems(prev => {
        // 尝试通过真实 ID 查找已存在的项
        let existingIndex = prev.findIndex(item => item.id === newHistoryItem.id);

        // 如果新项不是临时项 (-1) 且真实 ID 未找到，则检查是否存在临时项 '-1' 进行替换
        // (通常发生在新的对话开始时，会有一个 id 为 '-1' 的临时记录)
        if (existingIndex === -1 && newHistoryItem.id !== '-1') {
            const tempIndex = prev.findIndex(item => item.id === '-1');
            if (tempIndex !== -1) {
                existingIndex = tempIndex; // 使用临时项的索引进行替换
            }
        }

        if (existingIndex !== -1) { // 如果找到匹配的项 (包括临时项)，则替换它
          const newList = [...prev];
          newList[existingIndex] = newHistoryItem;
          return newList;
        } else { // 否则，将新项添加到列表开头
          return [newHistoryItem, ...prev];
        }
      });
      if (newHistoryItem) { // 如果有新历史记录，设置其为选中状态
        setSelectedItem(newHistoryItem);
      }
    }
  }, [newHistoryItem]);

  // 根据 showAll 状态决定显示的历史记录项 (前10个或全部)
  const displayedItems = showAll ? historyItems : historyItems.slice(0, 10);

  // 处理历史记录项点击事件
  const handleItemClick = (item) => {
    if (disableClick) { // 如果禁用了点击，则不执行任何操作
       return;
    }
    setSelectedItem(item); // 设置当前选中的历史记录项
    onItemSelected(item); // 调用父组件回调函数，传递选中项
  };

  return (
    <div className="history-panel"> {/* 历史记录面板容器 */}
      <div className="panel-header"> {/* 面板头部 */}
        <div className="app-logo"> {/* 应用Logo和名称 */}
          <img src={logo}></img>
          <span className="logo-text">SmartOffice+</span>
        </div>
      </div>
      <div className='chart-text'>聊天</div> {/* 聊天标题 */}
      <div className="history-list"> {/* 历史记录列表 */}
        {displayedItems.map((item) => (
          <div
            key={item.id}
            className={`history-item ${selectedItem?.id === item.id ? 'selected' : ''} ${disableClick ? 'notAllow' : ''}`} // 样式类名
            onClick={() => handleItemClick(item)} // 点击事件
            style={{
              color: selectedItem?.id === item.id ? '#67bae6' : '#666', // 选中项颜色
            }}
          >
            <div>{item.title}</div> {/* 历史记录标题 */}
          </div>
        ))}
        {historyItems.length > 10 && ( // 如果历史记录项超过10个，显示"查看更多"按钮
          <div className="history-footer"> {/* 底部按钮包装器 */}
            <button
              className="view-more-btn"
              onClick={() => setShowAll(!showAll)} // 点击切换显示全部/收起
            >
              {showAll ? '收起' : '查看更多'} {/* 按钮文本 */}
            </button>
          </div>
        )}
      </div>

      <style jsx>{`
        .history-panel {
          border-radius: 8px;
          top: 0;
          right: 0;
          width: 500px;
          height: 100%;
          display: flex; /* Ensure it's a flex container */
          flex-direction: column; /* Stack children vertically */
          overflow: hidden; /* Set to hidden, main scroll will be history-list */
        }

        .panel-header {
          display: flex;
          align-items: center;
          padding: 20px;
          position: sticky; /* Make header sticky */
          top: 0; /* Stick to the top */
          z-index: 1; /* Ensure it stays above scrolling content */
          background-color: white; /* Ensure background is solid when sticky */
        }

        .app-logo {
          display: inline-flex;
          align-items: center;
          width:45%;
          gap:5px;
          background-color: #f5f5f5;
          border-radius: 8px;
          padding: 8px 16px;
        }

        .logo-text {
          font-size: 16px;
          color: #333;
        }

        .history-list {
          flex: 1; /* Allow it to grow and shrink */
          overflow-y: auto; /* Enable vertical scrolling for the list content */
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 8px;
          min-height: 0; /* Added for flex items with overflow */
        }

        .history-item {
          font-size: 14px;
          cursor: pointer;
          width:240px; /* Ensure fixed width */
          padding: 12px;
          margin-left:10px;
          border-radius: 6px;
          transition: all 0.2s;
          background-color: transparent;

          height: 48px !important; /* Added !important */
          box-sizing: border-box; /* Ensure padding is included in height */
        }
        .history-item > div {
          width: 100%; /* Ensure inner div fills parent width */
   
          overflow: hidden; /* Ensure content is hidden if it overflows */
          white-space: nowrap; /* Ensure text stays on one line */
          text-overflow: ellipsis; /* Ensure ellipsis for overflowed text */
          display: block; /* Ensure it behaves as a block element */
        }
        .history-item:hover {
          background-color: #f5f5f5;
        }

        .history-item.selected {
          font-weight: 500;
          background-color: #e6f4ff;
        }
.chart-text{
margin-left:20px;
    color: rgb(102, 102, 102);
}
        .history-footer {
          padding: 0; /* Remove padding from history-footer */
          text-align: left;
          margin-left:10px;
          /* Ensure no sticky property here */
        }

        .view-more-btn {
          background: none;
          border: none;
          color: #007bff;
          cursor: pointer;
          font-size: 14px;
          padding: 12px 20px; /* Add padding to the button itself */
          text-align: left;
          transition: color 0.2s;
          display: block; /* Make it a block element */
        }

        .view-more-btn:hover {
          color: #0056b3;
        }

        /* 自定义滚动条样式 */
        .history-list::-webkit-scrollbar {
          width: 6px;
        }

        .history-list::-webkit-scrollbar-track {
          background: transparent;
        }

        .history-list::-webkit-scrollbar-thumb {
          background-color: #ddd;
          border-radius: 3px;
        }

        .history-list::-webkit-scrollbar-thumb:hover {
          background-color: #ccc;
        }
              .notAllow{
    cursor: not-allowed;
    pointer-events: none;
    }
      `}</style>
    </div>
  );
});

export default HistoryPanel;